import React from "react";
import "./index.less";
export default function Header(props) {
  const { addNewTodo } = props;

  //方法
  const publish = (e) => {
    //判断
    //如果敲击的不是回车 就不执行
    if (e.keyCode !== 13) {
      return;
    }
    //如果输入为空 也不执行
    const userInput = e.target.value.trim();
    if (!userInput) {
      return alert("请输入内容");
    }
    //添加新数据
    addNewTodo({ id: Date.now(), thing: userInput, done: false });
    //清空输入框
    e.target.value = "";
  };
  return (
    <div className="todo-header">
      <input
        type="text"
        placeholder="请输入你的任务名称，按回车键确认"
        onKeyUp={publish}
      />
    </div>
  );
}
